<template id='sign'>
    <div class="sign ">
        <SignCard :options="signData" @click="submit">
            <template v-slot:form>
                <div class="form">
                    <ZyInput :zyModel="signData.email" ref="email"></ZyInput>
                    <ZyInput :zyModel="signData.password" ref="password" class="zInput"></ZyInput>
                    <ZySingle :zyModel="signData.remember" @click="choseRemember" class="singalRem">
                        <template v-slot:checkTitle>
                            <p class="checkTitle" :class="{ isGreen: signData.remember }">Remember me</p>
                        </template>
                    </ZySingle>
                    <p class="disCenter"><span class="alink" @click="forgot">Forgot your password?</span></p>
                    <ZySingle :zyModel="signData.agree" @click="choseAgree" class="singalAgr">
                        <template v-slot:checkTitle>
                            <p class="checkTitle" :class="{ isGreen: signData.agree }">Agree with Enchi.io <span
                                    class="blink" :class="{ isGreen: signData.agree }">User
                                    Terms</span> and <span class="blink" :class="{ isGreen: signData.agree }">Privacy
                                    Policy</span>.</p>
                        </template>
                    </ZySingle>
                    <p class="info">Unregistered email will be created with as a new account.</p>
                </div>
            </template>
        </SignCard>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { createNamespacedHelpers } from "vuex";
const common = createNamespacedHelpers("common");
const sign = createNamespacedHelpers("sign");
const emailVerify = createNamespacedHelpers("emailVerify");
import { setCookie, getCookie } from "@/utils/cookie.js";
const Base64 = require('js-base64').Base64
export default {
    name: 'sign',
    components: {
    },
    // 定义属性
    data() {
        return {

        }
    },
    props: {
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
        ...sign.mapState(['signData']),
        ...emailVerify.mapState(['emailVerifyData'])
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        ...emailVerify.mapMutations(['protectEmail']),
        ...common.mapMutations(['setUserInfo']),
        ...sign.mapMutations(['getRemember']),
        //显示input框提示
        showTip() {
            this.$refs.password.showFlag()
        },
        //忘记密码
        forgot() {
            this.$emit('forgot')
        },
        //提交
        submit() {
            let email = this.$refs.email.check('email')
            let password = this.$refs.password.check('password')
            if (email && password) {
                if (!this.signData.agree) {
                    this.$message.warning("Please agree with Enchi.io");
                } else {
                    this.login();
                }
            }
        },
        //登录
        async login() {
            let res = await this.$api.register.userLoginApi({
                email: this.signData.email.value,
                pwd: this.signData.password.value,
                sessionId: getCookie("sessionID")
            })
            if (this.$isCode(res)) {
                this.rememberPassword();
                if (res.data.is_register == 1) {
                    let userInfo = {
                        isLogin: true,
                        email: res.data.email,
                        birth: res.data.birth,
                        icon: res.data.icon,
                        userId: res.data.id,
                    }
                    this.setUserInfo(userInfo)
                    setCookie("token", res.data.token, 7);
                    this.$emit('submit', 'login')
                } else {
                    this.emailVerifyData.password = this.signData.password.value;
                    this.emailVerifyData.realEmail = this.signData.email.value;
                    this.protectEmail();
                    this.$emit('submit', 'register')
                }
            }
        },
        //记住密码功能
        rememberPassword() {
            if (this.signData.remember) {
                setCookie("email", this.signData.email.value, 7);
                // base64加密密码
                let passWord = Base64.encode(this.signData.password.value);
                setCookie("password", passWord, 7);
            } else {
                setCookie("email", "");
                setCookie("password", "");
            }
        },

        //是否记住密码
        choseRemember() {
            this.signData.remember = !this.signData.remember;
        },
        //同意协议
        choseAgree() {
            this.signData.agree = !this.signData.agree;
        },
        //重置提示
        reset() {
            this.$refs.email.reset()
            this.$refs.password.reset()
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.sign {
    .descs {
        margin-top: 26px;
        text-align: center;

        .desc {
            color: #a8a8a8;
            font-size: 18px;
            margin-top: 15px;
        }

        .desc:nth-child(1) {
            margin-top: 0px;
        }

    }

    .form {
        margin-top: 43px;

        .zInput {
            margin-top: 36px;
        }


    }

    .singalRem {
        margin-top: 30px;
    }

    .singalAgr {
        margin-top: 180px;
    }

    .checkTitle {
        user-select: none;
        color: rgba(168, 168, 168, 0.3);
        margin-left: 8px;
    }



    .alink,
    .blink {
        user-select: none;
        cursor: pointer;
        font-size: 14px;
        margin-top: 60px;
        border-bottom: 1px solid @tColor;
    }

    .blink {
        border-bottom: 1px solid rgba(168, 168, 168, 0.3);
    }

    .blink:hover {
        color: @tColor;
        border-bottom: 1px solid @tColor;
        -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

    .isGreen {
        color: @tColor;
        border-color: @tColor;
    }

    .info {
        user-select: none;
        margin-top: 10px;
        font-size: 12px;
        color: rgba(168, 168, 168, 0.3);
    }
}

//手机样式
@media screen and (max-width: 650px) {
    .sign {
        .form {
            margin-top: 20px;

            .alink {
                margin-top: 30px;
            }

            .singalRem {
                margin-top: 40px;
            }

            .singalAgr {
                margin-top: 110px;
            }

            .checkTitle {
                font-size: 13px;
            }

            .blink,
            .alink {
                font-size: 12px;
            }
        }

        /deep/.confirm {
            bottom: 120px !important;
        }
    }
}
</style>